import { FC, useEffect } from 'react'

// import BaseRouter from './routes'
import { useLocation, useRoutes, useNavigate } from 'react-router-dom'
import { routes } from './routes/test'

// 导入路由配置表
// import routes from './routes/router'

// 根组件样式
import './App.css'
import { useSelector } from 'react-redux'
import { RootState } from './store'

export const App: FC = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const { token } = useSelector((state: RootState) => state.login)

  const pathname = location.pathname

  useEffect(() => {
    // 白名单
    const whiteList = ['/login', '/404']

    if (token) {
      if (pathname === '/login') {
        navigate('/')
      } else {
        navigate(pathname)
      }
    } else {
      if (whiteList.includes(pathname)) {
        navigate(pathname)
      } else {
        navigate('/login')
      }
    }
  }, [pathname, token, navigate])

  const element = useRoutes(routes)

  return <>{element}</>
}
